<template>
<div class="editperson">
    <aside class="edit">
        
    <form @submit.prevent="editform()">
        <h1>修改信息</h1>
        <input type="text" required placeholder="请输入姓名" v-model.lazy.trim="objU.uname"/>
        <input type="number" required min="18" max="70"  placeholder="请输入你的岁数" v-model.lazy.trim="objU.age"/>
        <!-- 将v-model所获取到的value值转换成数字类型数据 -->
        <select name="" id="" required v-model.number="objU.port">
            <option value="" disabled>--请选择职务--</option>
            <option value="1">CEO</option>
            <option value="2">总经理</option>
            <option value="3">部门主管</option>
            <option value="4">组长</option>
            <option value="5">员工</option>
        </select>
        <input type="number" min="2500" placeholder="请输入薪资" required v-model.lazy.trim="objU.salary">
        <input type="date" placeholder="请输入入职日期" required v-model="objU.ctime"/>
        <aside class="a1">
        <input type="radio" value="0" v-model="objU.gender"/><span>女</span>
        <input type="radio" value="1" v-model="objU.gender"/><span>男</span>
        </aside>
        <aside class="a2">
            <button>提交</button>
        </aside>
    </form>
    </aside>
</div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
    name : 'EditPerson',
    data(){
        return{
            // 整个表单对应的对象
            ind : '',
            objF:{
                uname:'',
                gender:0,
                age:18,
                port:'',
                salary:2500,
                ctime:'',
            }
        }
    },
    computed:{
        ...mapState(['plist']),
    },
    // 生命周期函数
    mounted(){
        this.ind = this.$route.query.i;
        let obj = this.plist[this.ind];
        console.log(obj);
        
        this.objF = {
            uname : obj.uname,
            gender : obj.gender,
            age : obj.age,
            port : obj.port,
            salary : obj.salary,
            ctime : obj.ctime
        }
    },
    methods:{
        ...mapMutations(['editlist']),
        // 提交表单事件
        editform(){
            console.log(this.ind);
            
            let nowtime = new Date().getTime();
            let Ctime = new Date(this.objF.ctime).getTime();
            if (Ctime > nowtime) {
                alert('入职时间不得高于当前系统时间');
                return
            }
            this.editlist({val:this.objF,id:this.ind});
            console.log({val:this.objF,id:this.ind});
            
        }
    }
}
</script>

<style scoped>
.editperson{
    background-color: rgb(255, 142, 217);
    height: 90vh;
}
.edit{
    width: 100%;
    text-align: center;
}

.edit form{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 90vh;
}
.edit input{
    border-radius: 8px;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 70%;
    line-height: 2rem;
    border: 0;
}
.a1{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.a1 input{
    border: 0;
    width: 10%;
    line-height: 2rem;
}
.a2{
    width: 100%;
}
.a2 button{
    border-radius: 8px;
    border: 0;
    line-height: 2rem;
    width: 20%;
}
</style>